<template>
	<div>
		<div class="Search">
			<div class="nav">
				<div class="nav_left">
					<div class="iconfont icon-fanhui" @click="gettply"></div>
					<span>返回</span>
				</div>
				<div class="nav_centen">
					<p class="centen">跟“{{ this.nav }}”有关的书籍</p>
				</div>
				<div class="nav_rigth">
					<div class="iconfont icon-shujia" @click="shujia"></div>
					<div class="iconfont icon-home" @click="gettplylists"></div>
				</div>
			</div>
			<div class="nav_hot" v-if="this.ullists != null">
				<div class="ul">
					<ul>
						<li v-for="(item, index) in this.ullists" :key="index" @click="getbookinfo(item._id)">
							<div class="left">
								<img
									:src="
										'http://statics.zhuishushenqi.com' +
											item.cover +
											'?imageMogr2/thumbnail/125x160'
									"
									alt=""
									srcset=""
								/>
							</div>
							<div class="rigth">
								<p>
									{{ item.author }}
								</p>
								<div>
									<div class="div_left">
										{{ item.title }}<span class="div_con">|</span>{{ item.cat }}
									</div>
									<div class="div_rigth">{{ item.majorCate }}</div>
								</div>
								<p class="con">
									{{ item.shortIntro }}
								</p>
								<div>
									<div class="div_left">
										<span class="div_span">{{ item.latelyFollower }}</span
										>人气<span class="div_con">|</span
										><span class="div_span">{{ item.retentionRatio }}%</span>读者留存
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			showlists: true,
			ullists: null,
			nav: null,
		};
	},
	methods: {
		gettply() {
			this.$router.replace('/Search');
		},
		getbookinfo(id) {
			localStorage.setItem('boosk_id', id);
			this.$router.push({
				path: '/Bookdetails',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		},
		shujia() {
			this.$router.push({
				path: '/Bookdetails/Bookshelf',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		},
		gettplylists() {
			this.$router.replace('/Male');
			this.$store.commit('showlists', (this.showlists = false));
		},
	},
	created() {
		this.$toast.loading({
			duration: 0,
			forbidClick: true,
			mask: true,
			message: '加载中...',
		});
		this.$store.commit('showlists', (this.showlists = true));
		let valuedata = localStorage.getItem('valuedata');
		this.nav = valuedata;
		this.$axios.get('http://novel.kele8.cn/search?keyword=' + valuedata).then((data) => {
			this.ullists = data.data.books;
			this.$toast.clear();
		});
	},
};
</script>

<style lang="less" scoped>
.Search {
	width: 640px;
	background-color: #f5f2ed;
	.nav {
		width: 640px;
		background-color: #b83320;
		display: flex;
		justify-content: space-between;
		.nav_left {
			flex: 0 0 100px;
			display: flex;
			.iconfont {
				font-size: 30px;
				line-height: 70px;
				color: #fff;
				margin-left: 10px;
			}
			span {
				line-height: 70px;
				color: #fff;
				font-size: 16px;
			}
		}
		.nav_centen {
			flex: 1;
			margin: 15px 0;
			display: flex;
			.centen {
				margin: 0 auto;
				color: #fff;
				margin-top: 8px;
				font-size: 18px;
			}
		}
		.nav_rigth {
			flex: 0 0 100px;
			display: flex;
			.iconfont {
				font-size: 28px;
				line-height: 70px;
				margin: 0 auto;
				color: #fff;
			}
			div:nth-child(2) {
				font-size: 35px;
			}
		}
	}

	.nav_hot {
		width: 95%;
		margin: 0 auto;
		.ul {
			width: 95%;
			ul {
				width: 100%;
				li {
					margin: 20px 0;
					display: flex;
					.left {
						flex: 0 0 90px;
						img {
							width: 90px;
						}
					}
					.rigth {
						flex: 1;
						padding: 0 20px 20px;
						border-bottom: 1px solid #ccc;
						p {
							font-weight: bold;
						}
						.con {
							font-weight: normal;
							width: 500px;
							color: #666;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						div {
							display: flex;
							margin: 5px 0;
							justify-content: space-between;
							.div_left {
								line-height: 28px;
								// color: #666;
								.div_con {
									margin: 0 10px;
								}
								.div_span {
									color: #b83320;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
